<!-- OrderItem.vue -->
<template>
  <view class="order-card2">
    <!-- 头部 -->
    <view class="header">
      <view class="store-info">
        <image
          class="store-icon"
          src="@/assets/imgs/wangdian.svg"
          mode="aspectFit"
        ></image>
        <text class="store-name">宏达快送</text>
        <IconFont name="right" size="16" color="#999" />
        <text class="status">交易完成</text>
      </view>
    </view>

    <!-- 商品内容 -->
    <view class="contex">
      <!-- 商品信息 -->
      <view class="product-ino">
        <image
          class="product-imgs"
          :src="item.imageUrl"
          mode="aspectFill"
        ></image>
        <view class="product-details">
          <view class="flx-row">
            <text class="product-title longs">脆升升香脆薯条50g土豆条...</text>
            <text class="price">¥99.00</text>
          </view>
          <view class="flx-row">
            <text class="product-spec longs">脆升升香脆薯条 5包</text>
            <text class="quantity">x2</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部 -->
    <view class="footer">
      <!-- 总计 -->
      <view class="total">
        <text class="total-text">共一件商品，合计：</text>
        <text class="total-price">¥99.00</text>
      </view>

      <!-- 操作按钮 -->
      <view class="actions">
        <nut-button class="btn-return" size="small" plain @tap="handleReturn"
          >申请售后</nut-button
        >
        <nut-button
          class="btn-buy-again"
          size="small"
          type="primary"
          @tap="handleBuyAgain"
          >再买一单</nut-button
        >
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps, computed } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
interface ProductData {
  id: number;
  title: string;
  spec: string;
  price: number;
  quantity: number;
  imageUrl: string;
}

const props = defineProps<{
  item: ProductData;
}>();

const totalPrice = computed(() => {
  return props.item.price * props.item.quantity;
});

const handleReturn = () => {
  console.log("申请售后");
};

const handleBuyAgain = () => {
  console.log("再买一单");
};
</script>

<style lang="scss">
.order-card2 {
  width: 100%;
  background: #fff;
  margin-bottom: 20rpx;
  overflow: hidden;
}

/* 头部样式 */
.header {
  padding: 24rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .store-info {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;

    .status {
      font-size: 24rpx;
      color: #999;
      margin-left: auto;
    }

    .store-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 12rpx;
    }

    .arrow-icon {
      margin-left: auto;
      color: #ccc;
      font-size: 36rpx;
    }
  }
}

/* 内容区域 */
.contex {
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  box-sizing: border-box;
  width: 100%;
  /* 商品信息 */
  .product-ino {
    display: flex;
    width: 100%;
    // margin-bottom: 30rpx;

    .product-imgs {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      background-color: #fff8e0;
    }

    .product-details {
      margin-left: 20rpx;
      flex: 1;

      .flx-row {
        display: flex;
        justify-items: center;
        width: 100%;
        .longs {
          flex: 1;
          margin-right: 20rpx;
        }
        .price {
          font-size: 36rpx;
          color: #333;
          font-weight: 500;
        }

        .quantity {
          font-size: 32rpx;
          color: #666;
        }
      }

      .product-title {
        font-size: 32rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 12rpx;
        display: block;
      }

      .product-spec {
        font-size: 28rpx;
        color: #666;
        display: block;
      }
    }
  }

  /* 价格数量 */
  .price-quantity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;

    .price {
      font-size: 36rpx;
      color: #333;
      font-weight: 500;
    }

    .quantity {
      font-size: 32rpx;
      color: #666;
    }
  }
}

/* 底部 */
.footer {
  padding: 0 24rpx 30rpx;

  /* 总计 */
  .total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20rpx 0;

    .total-text {
      font-size: 28rpx;
      color: #666;
    }

    .total-price {
      font-size: 36rpx;
      color: #333;
      font-weight: 500;
      margin-left: 10rpx;
    }
  }

  /* 按钮 */
  .actions {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx 0;
    gap: 20rpx;
  }
}
</style>
